<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <!-- 顶点着色器 -->
    <script id="vertex-shader" type="x-shader/x-vertex">
      attribute vec2 aPosition; // 位置坐标
      attribute vec4 aColor; // 颜色坐标
      varying vec4 vColor; // 颜色变量

      uniform mat4 uMatrix;     // 添加：用于旋转的变换矩阵
      void main() {
        gl_Position = uMatrix * vec4(aPosition, 0.0, 1.0);
        vColor = aColor; // 设置颜色
      }
    </script>

    <!-- 片元着色器 -->
    <script id="fragment-shader" type="x-shader/x-fragment">
      precision highp float; // 设置精度
      varying vec4 vColor; // 颜色变量
      void main() {
        gl_FragColor = vColor; // 使用颜色变量
      }
    </script>
    <script type="module">
      import initShaders from "../utils/initShader.js";

      const canvas = document.getElementById("canvas");
      const gl = canvas.getContext("webgl");
      if (!gl) {
        console.error("WebGL not supported");
      }

      const program = initShaders(gl);
      /*
        将三角形平移到原点
        应用旋转变换
        再平移回原来的位置
        这个过程称为“围绕某一点旋转”。
      */
      // 定义带颜色的三角形顶点数据（位置 + RGBA）
      const vertices = new Float32Array([
        // 位置       颜色
        -0.5,
        -0.5,
        1.0,
        0.0,
        0.0,
        1.0, // 红色
        0.5,
        -0.5,
        0.0,
        1.0,
        0.0,
        1.0, // 绿色
        0.0,
        0.5,
        0.0,
        0.0,
        1.0,
        1.0, // 蓝色
      ]);

      const buffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

      // 获取属性索引
      const aPosition = gl.getAttribLocation(program, "aPosition");
      const aColor = gl.getAttribLocation(program, "aColor");

      // 设置位置属性指针
      gl.vertexAttribPointer(
        aPosition,
        2,
        gl.FLOAT,
        false,
        6 * Float32Array.BYTES_PER_ELEMENT,
        0
      );
      gl.enableVertexAttribArray(aPosition);

      // 设置颜色属性指针
      gl.vertexAttribPointer(
        aColor,
        4,
        gl.FLOAT,
        false,
        6 * Float32Array.BYTES_PER_ELEMENT,
        2 * Float32Array.BYTES_PER_ELEMENT
      );
      gl.enableVertexAttribArray(aColor);

      // 获取 uniform 的位置
      const uMatrix = gl.getUniformLocation(program, "uMatrix");

      let deg = 0;
      // 矩阵相乘函数（4x4）
      function multiplyMatrices(a, b) {
        const result = new Float32Array(16);
        for (let row = 0; row < 4; row++) {
          for (let col = 0; col < 4; col++) {
            let sum = 0;
            for (let i = 0; i < 4; i++) {
              sum += a[col + i * 4] * b[row * 4 + i];
            }
            result[row * 4 + col] = sum;
          }
        }
        return result;
      }
      function render() {
        deg += 1;
        const rad = (deg * Math.PI) / 180;

        const sin = Math.sin(rad);
        const cos = Math.cos(rad);

        // 平移矩阵：先将三角形整体平移到原点（绕 (0, 0.5) 旋转）
        const translateBack = new Float32Array([
          1,
          0,
          0,
          0,
          0,
          1,
          0,
          0,
          0,
          0,
          1,
          0,
          0,
          -0.5,
          0,
          1, // 把三角形下移 0.5 单位，使顶部点回到原点
        ]);

        const rotate = new Float32Array([
          cos,
          -sin,
          0,
          0,
          sin,
          cos,
          0,
          0,
          0,
          0,
          1,
          0,
          0,
          0,
          0,
          1,
        ]);

        const translateForward = new Float32Array([
          1,
          0,
          0,
          0,
          0,
          1,
          0,
          0,
          0,
          0,
          1,
          0,
          0,
          0.5,
          0,
          1, // 再移回去
        ]);

        // 手动计算矩阵乘法：T * R * T_inv
        let matrix = multiplyMatrices(
          translateForward,
          multiplyMatrices(rotate, translateBack)
        );

        gl.uniformMatrix4fv(uMatrix, false, matrix);

        // 清屏
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);

        // 绘制三角形
        gl.drawArrays(gl.TRIANGLES, 0, 3);

        window.requestAnimationFrame(render);
      }

      render(); // 启动动画
    </script>
  </body>
</html>
